<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>前端项目</title>
	<style type="text/css">

		*{
			margin: 0;
			padding: 0;
		}
		body{
			width: 100%;
			background: #D0EEF7;
		}
		/*头部*/
		#top{
			width: 100%;
			height: 80px;
			background: #16B4E3;
		}
		h2{
			color: white;
			text-align: center;
			line-height: 80px;
			font-size: 30px;
			letter-spacing: 2px;
			text-shadow: 7px 3px 2px #E20FDB;
		}

		/*头部结束*/

		/*主体部分*/
		#main{
			width: 100%;
			margin: 30px auto;
			overflow: hidden;
		}
		/*上传部分*/
		#up{
			width: 1210px;
			margin: 0 auto;
			/*overflow: hidden;*/
			min-height: 200px;
		}
		#up p{
			position: relative;
			width: 150px;
			height: 170px;
			float: left;
			margin: 0 10px;
		}
		#up p.ad{
			background: #16B4E3;
			box-shadow: 0 0 7px #888;
			font-size: 12px;
			line-height: 18px;
			color: white;
			width: 140px;
			height: 160px;
			padding: 5px;
		}
		#up p input{
			position: absolute;
			top: 0;
			left: 0;
		}
		#up p input{
			width: 150px;
			height: 170px;
			border: none;
			box-shadow: 0 0 4px #888;
			border-radius: 3px;
		}
		#up p input.up{
			z-index: 10;
			opacity: 0;
		}
		#up p input.hidden{
			background: url(img/1.gif);
		}
		#up p.shangchuan{
			background: none;
			width: 170px;
			height: 150px;
		}
		#up p.shangchuan #sent{
			background: #16B4E3;
			color: white;
			font-size: 20px;
			font-weight: 700;
			text-align: center;
			text-indent: 0;
			line-height: 40px;
			letter-spacing: 10px;
			width: 150px;
			height: 40px;
			border: none;
			border-radius: 3px;
			box-shadow: 0 0 3px #888;
			margin-top: 80px;
			display: block;
			float: left;
		}
		#up p.shangchuan .zengjia{
			background: #16B4E3;
			color: white;
			font-size: 20px;
			font-weight: 700;
			text-align: center;
			text-indent: 0;
			line-height: 40px;
			height: 40px;
			width: 150px;
			border: none;
			border-radius: 3px;
			box-shadow: 0 0 3px #888;
			margin-top: 30px;
			display: block;
			float: left;
		}
		/*上传部分结束*/
		/*图片显示区域*/
		#menu{
			width: 100%;
			height: 40px;
			background: #16B4E3;
		}
		h3{
			font-size: 18px;
			font-weight: 400px;
			color: white;
			text-align: center;
			line-height: 40px;
		}
		/*图片显示区域结束*/
		.enter{
			width: 1210px;
			margin: 0 auto;
			min-height: 100px;
		}

		.enter .all{
			display: block;
			float: left;
			margin: 50px;
			height: 160px;
			width: 263px;
			overflow: hidden;
			box-shadow: 0px 0px 5px #000;
			border: 2px solid white;
			position: relative;
		}
		.enter .all.a0{
			transform: rotate(7deg);
		}
		.enter .all.a1{
			transform: rotate(-7deg);
		}
		.enter .all img{
			width: 261px;
			height: 158px;
			border: 2px solid white;
		}
		.enter .all:hover{
			box-shadow: 0px 0px 10px #000;
			transform: rotate(0deg);

		}
		.enter .all:hover img{
			border: none;
			width: 263px;
			height: 160px;
		}
		/*遮罩部分*/


		.enter .all p.down{
			background: #888;
			float: right;
			width: 50px;
			height: 30px;
			position: absolute;
			right: 0;
			bottom: 0;
			display: none;
			text-align: center;
		}
		.enter .all:hover p.down{
			display: block;
		}
		.enter .all:hover p.delate{
			display: block;
		}
		.enter .all p.down a.xiazai{
			width: 50px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 12px;
			text-decoration: none;
			color: white;
			display: block;
			width: 50px;
			height: 30px;
		}
		.enter .all p.delate{
			float: right;
			width: 50px;
			height: 30px;
			position: absolute;
			right: 0;
			top: 0;
			background: #888;
			text-align: center;
			display: none;
		}
		.enter .all p.delate a.shanchu{
			width: 50px;
			height: 30px;
			line-height: 30px;
			font-size: 12px;
			color: white;
			text-align: center;
			text-decoration: none;
			display: block;
			width: 50px;
			height: 30px;
		}
		/*遮罩部分结束*/
		/*主体结束*/
		/*底部*/
		#reg{
			width: 100%;
			height: 60px;
			background: #16B4E3;
		}
		#reg p{
			text-align: center;
			line-height: 20px;
			color: white;
			padding-top: 5px;
			font-size: 12px;
		}
		/*底部结束*/
		/*信息显示*/
		#show{
			width: 100%;
			min-height: 200px;
		}
		#show h3{
			background: #16B4E3;
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/hd_plugs_v150302.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<!-- 头部 -->
	<div id="top">
		<h2>点击头像添加图片 点击上传按钮上传</h2>

	</div>

	<!-- 主题部分 -->
	<div id="main">
		<div id="up">
			<form action="" method="post" enctype="multipart/form-data">
				<p class="ad">
					已实现功能：<br/>1.单个上传框点击多选<br/>
					2.增加上传框实现多选<br/>
					3.下载<br/>
					想完善的功能：<br/>
					1:点击上传的图片可以在上传框看见<br/>
					2:上传的图片按顺序排列<br/>
				</p>
				<p class="shangchuan">
					<input type="button" class="zengjia" value="点击增加上传框">
					<input type="submit" id="sent" value="点击上传">
				</p>

				<p>
					<input type="file" name="up[]" class="up" multiple="multiple">
					<input type="button" class="hidden a1" value="点击选择图片">
				</p>


			</form>
		</div>
<!-- 		<div id="show">
			<h3>信息显示</h3>
			<table border="1">
				<tr>
					<td style="colspan=5">上传图片相关信息</td>
				</tr>
				<tr>
					<td>图片名称</td>
					<td>图片类型</td>
					<td>图片大小</td>
					<td>图片目录</td>
					<td>上传时间</td>
				</tr>

				<tr>
					<td></td>
					<td></td>
					<td>图片大小</td>
					<td>图片目录</td>
					<td>上传时间</td>
				</tr>



			</table>
		</div> -->
		<div id="menu">
			<h3>图片显示区域</h3>

		</div>
		<div class="enter">
			<?php
				all('upload');
				function all($a){
					foreach (glob($a.'/*') as $k => $v) {
						if(is_dir($v)){
							all($v);
						}else{

			 ?>
			<div class="all">
				<img src="<?php echo $v; ?>">
				<p class="delate">
					<a href="del.php?file=<?php echo $v; ?>" class="shanchu">删除</a>
				</p>
				<p class="down">
					<a href="download.php?id=<?php echo $v; ?>" class="xiazai">下载</a>
				</p>
				<p class="text">
					<?php echo $v; ?>
				</p>
			</div>
			<?php }}} ?>
 		</div>
	</div>
	<!-- 主体部分结束 -->
	<!-- 底部 -->
	<div id="reg">
	<!-- 	<p>以上项目均为本人独立完成</p>
		<p class="reg">有的事正因为有难度所以才去做！加油！！继续努力！！未完待续 ~ </p> -->
	</div>
	<!-- 底部结束 -->

</body>
</html>
